<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common1.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <link rel="stylesheet" href="../../styles/icon2/iconfont.css" />


  <style>
    .blueBug {
      color: #419eff !important;
      position: relative;
    }
    .blueBug::after {
      content: "";
      position: absolute;
      right: -6px;
      height: 14px;
      width: 0px;
      border-right: solid 1px #ebeef5 !important;
    }
    .delBut {
      color: #f56c6c !important;
      position: relative;
    }
    .delBut::after {
      content: "";
      position: absolute;
      right: -6px;
      height: 14px;
      width: 0px;
      border-right: solid 1px #ebeef5 !important;

    }
    .card-icon-container {
      display: inline-block;
      font-size: 3rem;
    }
    .card-desc {
      font-weight: bold;
      float: right;
    }
    .card-title {
      margin-top: 0.3rem;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 1rem;
    }
    .card-count {
      margin-top: 0.75rem;
      color: #666;
      font-size: 1.25rem;
    }
    .echarts {
      width: 100%;
      height: 100%;
    }
    .e-title {
      font-size: 13px;
      color: #202a34;
      font-weight: 700;
    }
    .box-card {
      width: 100%;
    }
    .text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }
  </style>
</head>
<body>
<div class="dashboard-container" id="app">
  <div class="container">

    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always" class="box-card">
          <div class="card-icon-container">
            <i class="iconfont el-icon-mywenzhang-copy" style="color: #40C9C6"></i>
          </div>
          <div class="card-desc">
            <div class="card-title">今日订单量</div>
            <div class="card-count">{{toDayOrder}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="box-card">
          <div class="card-icon-container">
            <i class="iconfont el-icon-mywenzhang-copy" style="color: #36A3F7"></i>
          </div>
          <div class="card-desc">
            <div class="card-title">昨日订单量</div>
            <div class="card-count">{{yDayOrder}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="box-card">
          <div class="card-icon-container">
            <i class="iconfont el-icon-myuser" style="color: #34BFA3"></i>
          </div>
          <div class="card-desc">
            <div class="card-title">用户数量</div>
            <div class="card-count">{{userCount}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="box-card">
          <div class="card-icon-container">
            <i class="iconfont el-icon-myfangwenliang" style="color: #F4516C"></i>
          </div>
          <div class="card-desc">
            <div class="card-title">员工数量</div>
            <div class="card-count">{{empCount}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top:1.25rem">
      <div class="e-title">一周流水统计</div>
        <div id="oneWeekLiuShui" style="height:350px">
        </div>
    </el-card>
    <el-row :gutter="30" style="margin-top:1.25rem">
      <!-- 文章浏览量排行 -->
      <el-col :span="16">
        <el-card>
          <div class="e-title">一周订单统计</div>
          <div id="oneWeekOrder" style="height:350px">
          </div>
        </el-card>
      </el-col>
      <!-- 分类数据统计 -->
      <el-col :span="8">
        <el-card>
          <div class="e-title">热卖菜品统计</div>
          <div id="hotSeal" style="height:350px">
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/food.js"></script>
<script src="../../api/order.js"></script>
<script src="../../api/user.js"></script>
<script src="../../api/member.js"></script>
<script src="../../plugins/echarts/echarts.js"></script>

<script>

  var app = new Vue({
    el: '#app',
    data() {
      return {

        loading: true,
        toDayOrder: null,
        yDayOrder: null,
        userCount: null,
        empCount: null,
        oneWeekLiuShui: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            }
          },
          color: ["#3888fa"],
          legend: {
            data: ["订单流水"]
          },

          xAxis: {
            lineStyle: {
              // 设置x轴颜色
              color: "#666"
            },
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          grid: {
            left: "0%",
            right: "0%",
            bottom: "0%",
            top: "10%",
            containLabel: true
          },
          yAxis: {
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: "#048CCE"
              }
            }
          },
          series: [
            {
              name: "金额",
              data: [null, null, null, null, null, null, null],
              type: 'line',
              smooth: true
            }
          ],
        },
        oneWeekOrder: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            }
          },
          color: ["#58AFFF"],
          grid: {
            left: "0%",
            right: "0%",
            bottom: "0%",
            top: "10%",
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [null, null, null, null, null, null, null],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        },
        hotSeal:{
          color: [
            "#7EC0EE",
            "#FF9F7F",
            "#FFD700",
            "#C9C9C9",
            "#E066FF",
            "#C0FF3E"
          ],
          legend: {
            data: [],
            bottom: "bottom"
          },
          tooltip: {
            trigger: "item",
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              itemStyle: {
                borderRadius: 5
              },
              name: "菜品",
              radius: [20, 140],
              roseType: 'area',
              type: "pie",
              data: []
            }
          ]
        }


      }
    },
    computed: {},
    created() {
      this.getToDayOrder();
      this.getYDayOrder();
      this.getUserCount();
      this.getEmpCount();
      this.getOneWeekLiuShui();
      this.getOneWeekOrder();
      this.getHotSeal();

    },
    mounted() {
      setTimeout(()=>{
        this.initOneWeekLiuShui()
      },1000)
      setTimeout(()=>{
        this.initOneWeekOrder()
      },1000)
      setTimeout(()=>{
        this.initHotSeal()
      },1000)
    },


    methods: {

      getHotSeal(){
        getHotSealApi().then((res)=>{
          if (res.code === 1){

              res.data.dishCount.forEach(item =>{
              this.hotSeal.series[0].data.push({
                value: item.dishCount,
                name: item.name,
              })
              this.hotSeal.legend.data.push(item.name)
            })
            res.data.setmealCount.forEach(item =>{
              this.hotSeal.series[0].data.push({
                value: item.setmealCount,
                name: item.name,
              })
              this.hotSeal.legend.data.push(item.name)
            })

          }
        })
      },

      getOneWeekOrder(){
        getOneWeekOrderApi().then((res)=>{
          if (res.code === 1){
            this.oneWeekOrder.series[0].data = res.data.orderCount;
            this.oneWeekOrder.xAxis.data = res.data.days;
          }
        })
      },
      getOneWeekLiuShui(){
        getOneWeekLiuShuiApi().then((res)=>{
          if (res.code === 1){
            this.oneWeekLiuShui.series[0].data = res.data.amount;
            this.oneWeekLiuShui.xAxis.data = res.data.days;
          }
        })
      },

      getEmpCount(){
        getEmpCountApi().then((res)=>{
          if (res.code === 1){
            this.empCount= res.data
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
        })

      },
      getUserCount() {
        getUserCountApi().then((res)=>{
          if (res.code === 1){
            this.userCount = res.data
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
        })

      },

      getYDayOrder(){
        getYesDayOrderApi().then((res)=>{
          if (res.code === 1){
            this.yDayOrder = res.data
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
        })
      },
      getToDayOrder(){
        getToDayOrderApi().then((res)=>{
          if (res.code === 1){
            this.toDayOrder = res.data
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
        })
      },

      initOneWeekLiuShui(){
        var myChart = echarts.init(document.getElementById('oneWeekLiuShui'));
        var option = this.oneWeekLiuShui
        myChart.setOption(option);
      },
      initOneWeekOrder(){
        var myChart = echarts.init(document.getElementById('oneWeekOrder'));
        var option = this.oneWeekOrder
        myChart.setOption(option);
      },
      initHotSeal(){
        var myChart = echarts.init(document.getElementById('hotSeal'));
        var option = this.hotSeal
        myChart.setOption(option);
      },



      },

  })
</script>

</body>
</html>